<template>
  <div class="kv-item ue-clear">
    <form-label :mustInput="this.mustInput" :labelName="this.labelName"></form-label>
    <div class="kv-item-content">
      <input
        :name="inputName"
        :type="type"
        v-if="!isTextarea"
        :class="isNull"
        v-model="inputVal"
        @input="$emit('input',inputVal)"
        :placeholder="placeholder"
      />
      <textarea
        v-if="isTextarea"
        v-model="inputVal"
        @input="$emit('input',inputVal)"
        :placeholder="placeholder"
        :cols="textarea.cols"
        :rows="textarea.rows"
      ></textarea>
    </div>
    <span v-show="this.errHint" class="kv-item-tip error">
      {{hint.hintCont}}
      <span class="error-icon"></span>
    </span>
  </div>
</template>
<script>
import FormLabel from "./Input_label.vue";
export default {
  name: "input_tpn",
  props: {
    val:{type:String,default:''},
    mustInput: { type: Boolean, default: false },//必填项
    labelName: { type: String, default: "" },//标签名
    type: { type: String, default: "text" },//input的类型: text,number,password,textarea
    placeholder: { type: String, default: "" },//提示文字
    hint: {//错误提示内容
      type: Object,
      default: function() {
        return { status:0,hintCont: "" };
      }
    },
    inputName:{
      type:String,
      default:''
    },
    dataChange: {//监听提交事件
      type: Object,
      default: function() {
        return { reset:0};
      }
    },
    isTextarea: { type: Boolean, default: false },//是否为文本域
    textarea: {//文本域设置
      type: Object,
      default: function() {
        return { cols: 40, rows: 20 };
      }
    }
  },
  components: {
    "form-label": FormLabel
  },
  data() {
    return { inputVal: "", errHint: false, isNull: "" };
  },
  mounted() {
   this.inputVal = this.val
  },
  watch: {
    inputVal(newData) {
      if (newData.replace(/\s+/g, "") == "") {
        this.errHint = true;
        this.isNull = "isNull";
      } else {
        this.errHint = false;
        this.isNull = "";
      }
    },
    'hint.status':{
      handler(newV,oldV){
        if(newV != oldV){
          this.errHint = true;
        }
      }
    },
    'dataChange.reset':{
      handler(newVal,oldVal){
        
        //重置
        if(newVal == oldVal) return
        this.inputVal =''
      },
       deep:true
    }
  }
};
</script>
